<template>
  <Menu :isSearch="false"></Menu>
  <div class="spaceConfig">
    <div class="spaceConfig-left">
      <h2>空间设置</h2>
      <div class="left-item" v-for="item in leftMenu" :key="item.key" @click="currentMenu = item.key"
        :class="{ 'item-active': currentMenu === item.key }">{{ item.title }}</div>
    </div>
    <div class="spaceConfig-right">
      <basicMessage v-if="currentMenu === 1"></basicMessage>
      <deleteSpace :spaceId="route.params.space_id as string" v-if="currentMenu === 4"></deleteSpace>
      <spaceUser :spaceId="route.params.space_id as string" v-if="currentMenu == 3"></spaceUser>
      <spaceEssay :spaceId="route.params.space_id as string" v-if="currentMenu === 2"></spaceEssay>
    </div>
  </div>
</template>

<script setup lang='ts'>
import { useRoute } from 'vue-router'
import Menu from "../../components/Menu.vue"
import basicMessage from "./basicMessage.vue"
import deleteSpace from "./deleteSpace.vue"
import spaceUser from "./spaceUser.vue"
import spaceEssay from "./spaceEssay.vue"

import { ref } from 'vue'
const route = useRoute()
const leftMenu = ref([
  {
    key: 1,
    title: "基本信息",
  },
  {
    key: 2,
    title: "空间文章",
  },
  {
    key: 3,
    title: "空间成员",
  },
  {
    key: 4,
    title: "删除空间",
  },
])
const currentMenu = ref(1)

</script>

<style lang='scss' scoped>
.spaceConfig {
  width: 1290px;
  min-height: 100vh;
  padding: 80px 20px 20px 0;
  box-sizing: border-box;
  margin: auto;
  background-color: var(--bs-content-background);
  display: flex;

  &-left {
    width: 300px;
    min-height: 100%;
    // 右侧边框线
    border-right: 1px solid var(--bs-chat-divider);
    padding-left: 40px;
    box-sizing: border-box;

    .left-item {
      height: 40px;
      line-height: 40px;
      font-size: 15px;
      padding-left: 10px;
      box-sizing: border-box;
      cursor: pointer;
      border-radius: 5px;
      margin: 10px 0;
    }

    .item-active {
      color: #63e2b7;
    }

    .left-item:hover {
      background-color: rgba(99, 226, 183, 0.15);
    }
  }

  &-right {
    flex: 1;
    height: 100%;
  }
}
</style>